<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
</head>
<body class="layui-layout-body">
<button type="button" id="show" class="layui-btn layui-btn-normal">show</button>

<div class="layui-container" style="margin-top: 50px;width: 750px;">

    <table class="layui-hide" id="test" style="width: 300px" lay-filter="test"></table>
    <table class="layui-hide" id="demo" style="width: 300px" lay-filter="demo"></table>

    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="pay">支付</button>
            <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
            <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
        </div>
    </script>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="book">订购</a>
<!--        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>-->
    </script>
    <script th:src="@{/layui/layui.js}" charset="utf-8"></script>
    <script th:src="@{/layui/layui.all.js}" charset="utf-8"></script>
    <script type="text/javascript" th:src="@{/js/jquery-3.4.1.js}"></script>
    <script>
        layui.data('orderDetail', {
            key: 'data',
            value: [
            ]
        });

        layui.use(['table','element'], function(){
            var table = layui.table;
            var token = layui.data('token').data;
            table.render({
                elem: '#test'
                ,url:'/menu/findAll'
                ,title: '菜单列表'
                ,headers : {'token': token }
                ,cols: [
                    [
                        {field:'id', title: 'ID',fixed: 'left',sort:true}
                        ,{field:'name', title: '商品名称'}
                        ,{field:'price',title: '价格'}
                        ,{field:'state', title: '状态'}
                        ,{field:'logoUrl', title: '图片',templet: "#imgtmp"} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
                        ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:120}
                    ]

                ]
                ,page: true
            });

            //监听行工具事件
            table.on('tool(test)', function(obj){
                var data = obj.data;
                if(obj.event === 'del'){
                    layer.confirm('确定要删除吗？', function(index){
                        window.location.href="/menu/deleteById/"+data.id;
                        layer.close(index);
                    });
                } else if(obj.event === 'book'){
                    var id = data.id;
                    var name = data.name;
                    var price = data.price;
                    var number = 1 ;

                    var orderDetail = layui.data('orderDetail').data;
                    var flag = true;
                    for(var i = 0; i < orderDetail.length ; i++ ){
                        if(orderDetail[i].id == id) {
                            orderDetail[i].number += number;
                            orderDetail[i].total = orderDetail[i].price * orderDetail[i].number;
                            flag = false;
                        }
                    }
                    if(flag) {
                        orderDetail.push({date: 'id', id: id, name:name,price:price,number:number,total:price*number});
                    }
                    //需要自己手动跟新，不然内容不会改变
                    layui.data('orderDetail', {
                        key: 'data',
                        value: orderDetail
                    });


                    // console.log(layui.data('orderDetail').data);
                    // console.log(layui.data('orderDetail').data[0]);
                    // console.log(layui.data('orderDetail').data[0].id);
                    //判断数据类型
                    // console.log(Object.prototype.toString.call(temp));
                    // window.location.href="/order/findById/"+data.id;
                }
            });
        });
    </script>

</div>
<script type="text/html" id="imgtmp">
    <img src="{{d.logoUrl}}" >
</script>

<script>
    $(function(){
        $("#show").click(function () {
            layui.use('table', function(){
                var table = layui.table;
                var orderDetail = layui.data('orderDetail').data;
                table.render({
                    elem: '#demo'
                    ,data:orderDetail
                    ,toolbar: '#toolbarDemo'
                    ,title: '用户数据表'
                    ,totalRow: true
                    ,cols:
                        [
                            [
                                {type: 'checkbox', fixed: 'left'}
                                ,{field: 'id', title: 'ID', width: 80, sort: true,totalRowText: '合计'}
                                ,{field: 'name', title: '商品名称', width: 120}
                                ,{field: 'price', title: '单价', minWidth: 80}
                                ,{field: 'number', title: '数量', minWidth: 80}
                                ,{field: 'total', title: '总计', minWidth: 100,totalRow: true,}
                                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
                            ]
                        ]
                    ,page: true
                });
                // table.on('toolbar(demo)', function(obj){
                //     var checkStatus = table.checkStatus(obj.config.id);
                //     switch(obj.event){
                //         case 'pay':
                //             var data = checkStatus.data;
                //             layer.alert(JSON.stringify(data));
                //             break;
                //         case 'getCheckLength':
                //             var data = checkStatus.data;
                //             layer.msg('选中了：'+ data.length + ' 个');
                //             break;
                //         case 'isAll':
                //             layer.msg(checkStatus.isAll ? '全选': '未全选')
                //             break;
                //     };
                // });

                table.on('toolbar(demo)', function(obj){
                    var checkStatus = table.checkStatus(com.scau.config.id);
                    switch(obj.event){
                        case 'pay':
                            //支付
                            //提交订单 和 订单详情

                            var list = [];
                            var total_price = 0;
                            var orderDetail = layui.data('orderDetail').data;
                            for(var i = 0; i < orderDetail.length ; i++ ){
                                total_price +=orderDetail[i].price * orderDetail[i].number;
                                list.push(orderDetail[i]);
                                console.log(list);
                            }

                            var order = {
                                total_price:total_price
                                ,uid : 3
                            };

                            var formdata = {
                                list:list,
                                order:order
                            };
                            console.log(list);
                            console.log(order);
                            console.log(formdata);

                            $.ajax({
                                url:"/order/save",//这里是请求的地址
                                type: 'POST',
                                data: JSON.stringify(formdata),
                                contentType : "application/json;charset=UTF-8",
                                dataType: "json",
                                success:function(result){
                                    // window.location.href = "admin.html"
                                }
                                ,error:function(result){

                                }
                            });

                            break;
                        case 'getCheckLength':
                            var data = checkStatus.data;
                            layer.msg('选中了：'+ data.length + ' 个');
                            break;
                        case 'isAll':
                            layer.msg(checkStatus.isAll ? '全选': '未全选')
                            break;
                    };
                });

                //展示已知数据
                // table.render({
                //     elem: '#demo'
                //     ,totalRow: true
                //     ,even: true
                //     ,toolbar: '#toolbarDemo'
                //     ,page: true //是否显示分页
                //     ,cols: [
                //         [
                //             {field: 'id', title: 'ID', width: 80, sort: true,totalRowText: '合计'}
                //             ,{field: 'name', title: '商品名称', width: 120}
                //             ,{field: 'price', title: '单价', minWidth: 150}
                //             ,{field: 'number', title: '数量', minWidth: 160}
                //             ,{field: 'total', title: '总计', minWidth: 160,totalRow: true, templet: function(data){
                //                 return data.price * data.number;
                //             }
                //              }
                //         ]
                //     ]
                //     ,data:orderDetail


                    //,skin: 'line' //表格风格
                    //,limits: [5, 7, 10]
                    //,limit: 5 //每页默认显示的数量
                // });
            });
        });
    });
</script>
<script>

    //二级菜单联动
    layui.use('element', function(){
        var element = layui.element;

    });
</script>
</body>
</html>
